<template>
  <el-col :lg="6" :sm="12" :xs="12">
    <div class="cupk2-block-box">
      <el-row>
        <el-col :span="9">
          <el-avatar :class="'cupk2_home_row_icon ' + props.colorType" shape="square" :icon="props.icon" />
        </el-col>
        <el-col :span="15" style="text-align: left;padding-left: 20px;">
          <div style="color: #7c8db5;">{{ props.title }}</div>
          <div style="font-weight: 700;padding-top: 10px;font-size: 12px;">{{ props.num }}
            <el-button v-if="props.func" @click="props.func" style="margin-left: 4px;" type="primary" size="small" round
              plain>{{ props.functitle }}</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-col>
</template>
<script setup lang="ts">


const props = defineProps({
  colorType: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  num: {
    type: Number,
    required: true
  },
  func: {
    type: Function,
    required: false
  },
  functitle: {
    type: String,
    required: false
  },
})



</script>
<style scoped>
.cupk2-block-box {
  background-color: #ffffff;
  padding: 20px;
  text-align: center;
  border-radius: 1em;
  margin-left: 20px;
  margin-bottom: 20px;
}

.cupk2_home_row_icon {
  height: 64px;
  width: 64px;
  margin-right: 10px;
  font-size: 28px;
}

.cupk2_home_row_icon.purple {
  background-color: #9694ff;
}

.cupk2_home_row_icon.blue {
  background-color: #57caeb;
}

.cupk2_home_row_icon.green {
  background-color: #5ddab4;
}

.cupk2_home_row_icon.red {
  background-color: #ff7976;
}
</style>
